<template>
  <div class="v-eqpt-list">
    <c-row-search>
      <el-form :model="form" ref="form" inline @submit.native.prevent>
        <el-form-item prop="keywordSearch">
          <el-input
            v-model="form.keywordSearch"
            clearable
            @keyup.enter.native="search"
            :placeholder="tplLang('text_asset_a', ['btn_search_a'])"
          >
            <c-icon slot="prefix" name="search" prefix></c-icon>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">
            {{ multLang('btn_search_a') }}
          </el-button>
          <el-button @click="reset">
            {{ multLang('btn_rst_a') }}
          </el-button>
        </el-form-item>
        <el-form-item>
          <c-popover-form>
            <el-form :model="popperForm" ref="popperForm" label-width="128px">
              <c-row :col="6">
                <c-col>
                  <el-form-item
                    :label="multLang('title_asset_g')"
                    prop="positionsSearch"
                  >
                    <c-cascader
                      v-model="popperForm.positionsSearch"
                      multiple
                      clearable
                      :options="assetPositionTree"
                      :placeholder="multLang('title_m')"
                    ></c-cascader>
                  </el-form-item>

                  <el-form-item
                    :label="multLang('title_asset_d')"
                    prop="assetModelSearch"
                  >
                    <c-mult-select
                      v-model="popperForm.assetModelSearch"
                      :options="assetModelAllList"
                      :placeholder="multLang('title_m')"
                    >
                    </c-mult-select>
                  </el-form-item>

                  <el-form-item
                    :label="multLang('title_supplier_a')"
                    prop="customerSearch"
                  >
                    <c-mult-select
                      v-model="popperForm.customerSearch"
                      :options="customerList"
                      :placeholder="multLang('title_m')"
                    >
                    </c-mult-select>
                  </el-form-item>
                </c-col>
                <c-col>
                  <el-form-item
                    :label="multLang('title_asset_c')"
                    prop="assetTypesSearch"
                  >
                    <c-cascader
                      v-model="popperForm.assetTypesSearch"
                      multiple
                      clearable
                      :options="assetTypeAllTree"
                      :placeholder="tplLang('text_choose_a', ['title_asset_c'])"
                    ></c-cascader>
                  </el-form-item>

                  <el-form-item
                    :label="multLang('title_status_a')"
                    prop="runStatusSearch"
                  >
                    <c-mult-select
                      v-model="popperForm.runStatusSearch"
                      :options="assetStatusList"
                      :placeholder="
                        tplLang('text_choose_a', ['title_status_a'])
                      "
                    >
                    </c-mult-select>
                  </el-form-item>

                  <el-form-item
                    :label="multLang('title_level_a')"
                    prop="levelSearch"
                  >
                    <c-mult-select
                      v-model="popperForm.levelSearch"
                      :options="levelList"
                      :placeholder="multLang('title_m')"
                    >
                    </c-mult-select>
                  </el-form-item>
                </c-col>
                <c-col :col="12">
                  <el-form-item
                    :label="multLang('title_date_a')"
                    prop="dateSearch"
                  >
                    <c-date-range
                      v-model="popperForm.dateSearch"
                      :start.sync="popperForm.startDateSearch"
                      :end.sync="popperForm.endDateSearch"
                    ></c-date-range>
                  </el-form-item>
                  <el-form-item
                    prop="startDateSearch"
                    v-show="false"
                  ></el-form-item>
                  <el-form-item
                    prop="endDateSearch"
                    v-show="false"
                  ></el-form-item>
                </c-col>
                <c-col>
                  <el-form-item
                    :label="multLang('title_status_b')"
                    prop="statusSearch"
                  >
                    <c-mult-select
                      v-model="popperForm.statusSearch"
                      :options="assetInfoStatusList"
                      :placeholder="multLang('title_m')"
                    >
                    </c-mult-select>
                  </el-form-item>
                </c-col>
                <c-col>
                  <el-form-item
                    :label="multLang('title_status_c')"
                    prop="warrantiesTypeSearch"
                  >
                    <c-mult-select
                      v-model="popperForm.warrantiesTypeSearch"
                      :options="warrantiesTypeList"
                      :placeholder="multLang('title_m')"
                    >
                    </c-mult-select>
                  </el-form-item>
                </c-col>
              </c-row>
            </el-form>
          </c-popover-form>
        </el-form-item>
      </el-form>
      <template #right>
        <el-button
          v-if="auth.isAdd"
          type="primary"
          @click="$router.push({ name: Routes.EqptListAdd })"
        >
          <c-icon name="plus"></c-icon>

          {{ multLang('btn_new_a') }}
        </el-button>
        <c-select-more
          @command="moreActions"
          v-if="
            auth.isExport || auth.isBRExport || auth.isImport || auth.isDelete
          "
        >
          <el-button type="primary">
            {{ multLang('btn_more_a') }}
            <c-icon name="down"></c-icon>
          </el-button>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-if="auth.isExport" command="exportSelect">
              {{ multLang('btn_export_a') }}
            </el-dropdown-item>

            <el-dropdown-item v-if="auth.isExport" command="exportAll">
              {{ multLang('btn_export_b') }}
            </el-dropdown-item>

            <el-dropdown-item v-if="auth.isBRExport" command="exportQRCode">
              {{ multLang('btn_export_a', 'title_qr_a') }}
            </el-dropdown-item>

            <el-dropdown-item v-if="auth.isBRExport" command="exportQRCodeAll">
              {{ multLang('btn_export_b', 'title_qr_a') }}
            </el-dropdown-item>

            <el-dropdown-item v-if="auth.isImport" command="inport">
              {{ multLang('btn_import_b', 'title_dd') }}
            </el-dropdown-item>

            <el-dropdown-item v-if="auth.isDelete" command="batchDel">
              {{ multLang('text_ap') }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </c-select-more>
      </template>
    </c-row-search>
    <c-table-page
      class="v-eqpt-list-table"
      primary-key="id"
      :data="table.data"
      :col="col"
      :vol="table.vol"
      select
      @select-change="selectChange"
      :page.sync="page.current"
      :size.sync="page.size"
      :total="page.total"
      @page-change="pageChange"
    >
      <template
        #opn="{ row }"
        v-if="auth.isEdit || auth.isBRExport || auth.isDelete"
      >
        <el-button v-if="auth.isEdit" type="text" @click="edit(row)">
          <c-icon name="edit"></c-icon>
          <span>
            {{ multLang('btn_edit_a') }}
          </span>
        </el-button>

        <el-button v-if="auth.isBRExport" type="text" @click="qrcode(row)">
          <c-icon name="qrcode"></c-icon>
          <span>
            {{ multLang('title_qr_a') }}
          </span>
        </el-button>
        <el-button v-if="auth.isDelete" type="text" @click="del(row)">
          <c-icon name="delete"></c-icon>
          <span>
            {{ multLang('btn_delete_a') }}
          </span>
        </el-button>
      </template>
      <!-- <template v-if="auth.isEdit || auth.isBRExport || auth.isDelete" #opn>
        <el-table-column width="200px" fixed="right" align="center">
          <template slot="header" slot-scope="{}">
            {{ multLang('title_action_a') }}
          </template>
          <div slot-scope="{ row }" style="text-align: center">
            <el-button v-if="auth.isEdit" type="text" @click="edit(row)">
              <c-icon name="edit"></c-icon>
              <span>
                {{ multLang('btn_edit_a') }}
              </span>
            </el-button>

            <el-button v-if="auth.isBRExport" type="text" @click="qrcode(row)">
              <c-icon name="qrcode"></c-icon>
              <span>
                {{ multLang('title_qr_a') }}
              </span>
            </el-button>

            <el-button v-if="auth.isDelete" type="text" @click="del(row)">
              <c-icon name="delete"></c-icon>
              <span>
                {{ multLang('btn_delete_a') }}
              </span>
            </el-button>
          </div>
        </el-table-column>
      </template> -->
    </c-table-page>
    <c-dialog-qrcode
      :visible.sync="visibles.qrcode"
      :info="table.click"
    ></c-dialog-qrcode>
  </div>
</template>
<script>
import {
  getAssetData,
  getAssetAuth,
  exportSelectAsset,
  exportAllAsset,
  exportSelectQRCode,
  exportAllQRCode,
  delAsset
} from '@api/eqpt'
import { Routes } from '@vue/router/routes'
import { toRoute } from '@/util/router'
import CDialogQrcode from './mod/DialogQrcode'
import { ObjectCopy } from '@/util'
export default {
  name: 'VEqptList',
  components: { CDialogQrcode },
  props: {},
  data() {
    return {
      visibles: {
        qrcode: false
      },
      Routes: Routes,
      auth: {
        isAdd: false,
        isDelete: false,
        isEdit: false,
        isDetail: false,
        isImport: false,
        isExport: false,
        isBRExport: false,
        isDoc: false,
        isLog: false,
        isFault: false
      },
      docAuth: {
        isAdd: false,
        isDelete: false,
        isDownload: false
      },
      form: {
        keywordSearch: ''
      },
      popperForm: {
        dateSearch: [],

        positionsSearch: '',
        assetModelSearch: [],
        customerSearch: [],
        assetTypesSearch: [],
        runStatusSearch: [],
        levelSearch: [],
        statusSearch: [1],
        warrantiesTypeSearch: [],
        startDateSearch: '',
        endDateSearch: ''
      },
      page: {
        current: 1,
        size: 20,
        total: 0
      },
      table: {
        select: '',
        click: {},
        data: [],
        vol: [
          { key: 'title_asset_ae', val: true },
          { key: 'title_asset_a', val: true },
          { key: 'title_asset_g', val: true },
          { key: 'title_asset_d', val: true },
          { key: 'title_asset_c', val: true },
          { key: 'title_supplier_a', val: true },
          { key: 'title_status_a', val: true },
          { key: 'title_level_a', val: false },
          { key: 'title_date_a', val: false },
          { key: 'title_status_c', val: false }
        ]
      }
    }
  },
  computed: {
    assetPositionTree() {
      return this.optionTree('asset_position')
    },
    assetTypeAllTree() {
      return this.optionTree('asset_type_all')
    },
    assetModelAllList() {
      return this.optionList('asset_model_all')
    },
    assetStatusList() {
      return this.optionList('asset_status')
    },
    customerList() {
      return this.optionList('customer')
    },
    levelList() {
      return this.optionList('level')
    },
    assetInfoStatusList() {
      return this.optionList('asset_info_status')
    },
    warrantiesTypeList() {
      return this.optionList('warranties_type')
    },

    assetPositionMap() {
      return this.optionMap('asset_position')
    },
    assetTypeAllMap() {
      return this.optionMap('asset_type_all')
    },
    assetModelAllMap() {
      return this.optionMap('asset_model_all')
    },
    assetStatusMap() {
      return this.optionMap('asset_status')
    },
    customerMap() {
      return this.optionMap('customer')
    },
    levelMap() {
      return this.optionMap('level')
    },
    warrantiesTypeMap() {
      return this.optionMap('warranties_type')
    },
    assetInfoStatusMap() {
      return this.optionMap('asset_info_status')
    },
    col() {
      return [
        {
          label: 'title_asset_ae',
          prop: 'asset_code',
          // fixed: 'left',
          route: {
            name: Routes.EqptListView,
            auth: this.auth.isDetail,
            params: {
              auth: this.auth,
              docAuth: this.docAuth
            }
          }
        },
        {
          label: 'title_asset_a',
          prop: 'asset_name'
          // fixed: 'left'
        },
        {
          label: 'title_asset_g',
          prop: 'position_name'
          // fixed: 'left'
        },
        { label: 'title_asset_d', prop: 'model_name' },
        { label: 'title_asset_c', prop: 'category_name' },
        { label: 'title_supplier_a', prop: 'supplier_name' },
        {
          label: 'title_status_a',
          prop: 'running_status_id',
          formatter: row => this.assetStatusMap[row.running_status_id]
        },
        {
          label: 'title_level_a',
          prop: 'importment_level_id',
          formatter: row => this.levelMap[row.importment_level_id]
        },
        {
          label: 'title_date_a',
          prop: 'enable_time'
        },
        {
          label: 'title_status_c',
          prop: 'guarantee_status_id',
          formatter: row => this.warrantiesTypeMap[row.guarantee_status_id]
        }
      ]
    }
  },
  watch: {},
  beforeCreate() {},
  created() {
    this.setOption({ key: 'asset_position' })
    this.setOption({ key: 'asset_type_all' })
    this.setOption({ key: 'asset_model_all' })
    this.setOption({ key: 'asset_status' })
    this.setOption({ key: 'customer' })
    this.setOption({ key: 'level' })
    this.setOption({ key: 'asset_info_status' })
    this.setOption({ key: 'warranties_type' })
    getAssetAuth().then(({ data }) => {
      if (data) {
        ObjectCopy(this.auth, data.asset_data_management)
        //asset_data_management_attach_tag附件
        //asset_data_management_falut_tag故障
        //asset_data_management_log_tag日志
        if (data.asset_data_management_attach_tag) {
          this.auth.isDoc = true
          ObjectCopy(this.docAuth, data.asset_data_management_attach_tag)
        }
        if (data.asset_data_management_falut_tag) this.auth.isFault = true
        if (data.asset_data_management_log_tag) this.auth.isLog = true
      }
    })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {
    this.query()
  },
  deactivated() {
    const { close } = this.$route.params
    close && this.reset()
  },
  beforeDestroy() {},
  destroyed() {},
  methods: {
    pageChange() {
      this.query()
    },
    search() {
      this.page.current = 1
      this.query()
    },
    query() {
      getAssetData({
        pageNumber: this.page.current,
        pageSize: this.page.size,
        ...this.form,
        ...this.popperForm
      }).then(({ data }) => {
        if (data) {
          this.table.data = data.rows || []
          this.page.total = data.total
        }
      })
    },
    reset() {
      this.$refs.popperForm.resetFields()
    },
    selectChange(ids) {
      this.table.select = ids
    },
    exportSelect() {
      const ids = this.table.select
      ids && exportSelectAsset({ ids }).then(() => {})
    },
    exportAll() {
      exportAllAsset({
        ...this.form,
        ...this.popperForm
      }).then(() => {})
    },
    exportQRCode() {
      const ids = this.table.select
      ids && exportSelectQRCode({ ids }).then(() => {})
    },
    exportQRCodeAll() {
      exportAllQRCode({
        ...this.form,
        ...this.popperForm
      }).then(() => {})
    },
    inport() {},
    batchDel() {
      this.delAsset(this.table.select)
    },
    moreActions(cmd) {
      const fn = this[cmd]
      fn && typeof fn === 'function' && fn()
    },
    edit(row) {
      toRoute(Routes.EqptListView, {
        params: {
          id: row.id,
          edit: true,
          auth: this.auth,
          docAuth: this.docAuth
        }
      })
    },
    qrcode(row) {
      this.table.click = row
      this.visibles.qrcode = true
    },
    del(row) {
      this.delAsset(row.id)
    },
    delAsset(ids) {
      if (!ids) return
      this.$confirm(
        this.tplLang('text_ah', ['btn_delete_a', 'title_asset_i']),
        this.multLang('btn_delete_a', 'title_asset_i'),
        {
          confirmButtonText: this.multLang('btn_sure_a'),
          cancelButtonText: this.multLang('btn_cancel_a'),
          type: 'warning',
          iconClass: 'c-icon icon-info-circle color-danger'
        }
      ).then(() => {
        delAsset({
          ids
        }).then(() => {
          this.query()
        })
      })
    }
  }
}
</script>
<style lang="scss">
@include admin {
  .v-eqpt-list {
    &-table {
      height: calc(100% - 66px);
      overflow: hidden;
    }
  }
}
</style>
